<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>两列布局</title>
    <style>
        .parent1{
            height: 200px;
        }
       .left1{
          background-color: pink;
          width: 300px;
          height: 200px;
          
          /* 元素脱离了文档流 */
          float: left;
       }
       .right1{
        background-color: paleturquoise;
        height: 200px;

        margin-left: 300px;
      }
    </style>
</head>
<body>
    <!-- 两列布局一把情况下是指定宽与自适应布局，两列中左列是确定的宽度，右列是自动填满剩余所有空间的一种布局效果。 -->

    <!-- float + margin属性配合使用
         优点：实现方式简单
         缺点：自适应元素margin属性值与定宽元素的width属性值需要保持一致
               定宽元素浮动与自适应元素不浮动导致浏览器兼容性不好 -->
     <div class="parent1">
        <div class="left1">左边定宽</div>
        <div class="right1">右边自适应</div>
     </div>


        
    <!-- float + overflow属性配合使用 -->
     <!-- display属性的table相关值的应用 -->
</body>
</html>